<template>
	<view>
		<u-navbar :title="title" @rightClick="rightClick" :placeholder="true" :autoBack="true"></u-navbar>
		<view>
			<view class="details">
				<view v-if="type == 0">
					<view class="item">
						<text class="left">收支类型：</text>
						<text class="right">{{operationType[details.operationType]}}</text>
					</view>
					<view class="item">
						<text class="left">余额类型：</text>
						<text class="right">{{details.balanceType == 1 ? '微信' : '公对公'}}</text>
					</view>
					<view class="item">
						<text class="left">变动金额：</text>
						<text class="right">{{details.changeAmount}}元</text>
					</view>
					<view class="item" v-if="details.operationType == '20'">
						<text class="left">审核编号：</text>
						<text class="right">{{details.auditCode}}</text>
					</view>
					<view class="item">
						<text class="left">绑定信息：</text>
						<view>
							<view v-if="details.operationType == '08'">
								<view v-if="details.openId">
									<view class="type1" v-if="details.wxHeadImgUrl && details.wxNickName">
										<view>
											<image :src="details.wxHeadImgUrl" style="width: 100rpx;height: 100rpx;border-radius: 50%;"
												mode="">
											</image>
										</view>
										<view style="margin-left: 10rpx;">
											{{details.wxNickName}}
										</view>
									</view>
									<view v-else>暂无</view>
								</view>
								<!-- 微信提现 -->
								<view class="type2" v-else>
									<view class="item">
										<text class="left">开户名称：</text>
										<text class="right">{{details.accountName || "--"}}</text>
									</view>
									<view class="item">
										<text class="left">银行卡号：</text>
										<text class="right">{{details.bankCardNo || "--"}}</text>
									</view>
									<view class="item">
										<text class="left">银行名称：</text>
										<text class="right">{{details.bankName || "--"}}</text>
									</view>
									<view class="item">
										<text class="left">开 户 行：</text>
										<text class="right">{{details.bankBranch || "--"}}</text>
									</view>
									<view class="item">
										<text class="left">联系人姓名：</text>
										<text class="right">{{details.contactName || "--"}}</text>
									</view>
									<view class="item">
										<text class="left">联系人手机号：</text>
										<text class="right">{{details.contactPhone || "--"}}</text>
									</view>
								</view>
							</view>
							<!-- 公对公充值 -->
							<view class="type3" v-else-if="details.operationType == '09'">
								<view class="item">
									<text class="left">汇款日期：</text>
									<text class="right">{{details.remittanceTime}}</text>
								</view>
								<view class="item">
									<text class="left">开户名称：</text>
									<text class="right">{{details.accountName}}</text>
								</view>
								<view class="item">
									<text class="left">银行卡号：</text>
									<text class="right">{{details.bankCardNo}}</text>
								</view>
								<view class="item">
									<text class="left">银行名称：</text>
									<text class="right">{{details.bankName}}</text>
								</view>
								<view class="item">
									<text class="left">开 户 行：</text>
									<text class="right">{{details.bankBranch}}</text>
								</view>
								<view class="item">
									<text class="left">转账用途：</text>
									<text class="right">{{details.transferPurpose}}</text>
								</view>
							</view>
							<!-- 公对公提现 -->
							<view class="type4" v-else-if="details.operationType == '07'">
								<view class="item">
									<text class="left">开户名称：</text>
									<text class="right">{{details.accountName || "--"}}</text>
								</view>
								<view class="item">
									<text class="left">银行卡号：</text>
									<text class="right">{{details.bankCardNo || "--"}}</text>
								</view>
								<view class="item">
									<text class="left">银行名称：</text>
									<text class="right">{{details.bankName || "--"}}</text>
								</view>
								<view class="item">
									<text class="left">开 户 行：</text>
									<text class="right">{{details.bankBranch || "--"}}</text>
								</view>
								<view class="item">
									<text class="left">联系人姓名：</text>
									<text class="right">{{details.contactName || "--"}}</text>
								</view>
								<view class="item">
									<text class="left">联系人手机号：</text>
									<text class="right">{{details.contactPhone || "--"}}</text>
								</view>
							</view>
							<view v-else>--</view>
						</view>
					</view>
					<view class="item">
						<text class="left">备 注：</text>
						<text class="right">{{details.remark || "-"}}</text>
					</view>
					<view class="item" v-if="details.operationType == '09'">
						<text class="left">打款凭证：</text>
						<view class="image">
							<image :src="details.transferVoucher" style="width: 120rpx;height: 120rpx;" mode=""
								@click="previewImage(details.transferVoucher)" v-if="details.transferVoucher"></image>
							<view v-else>
								--
							</view>
						</view>
					</view>
					<view class="item" v-if="details.operationType == '03'">
						<text class="left">平台扣除备注：</text>
						<text class="right">{{details.applyRemark || "--"}}</text>
					</view>
					<view class="item" v-if="details.operationType == '03'">
						<text class="left">平台打款凭证：</text>
						<view class="image">
							<image :src="details.transferVoucher" style="width: 100rpx;height: 100rpx;" mode=""
								@click="previewImage(details.transferVoucher)" v-if="details.transferVoucher"></image>
							<view v-else>--</view>
						</view>
					</view>
					<view class="item">
						<text class="left">操作人：</text>
						<text class="right">{{details.applyOperator || "--"}}</text>
					</view>
					<view class="item">
						<text class="left">操作时间：</text>
						<text class="right">{{details.createTime || "--"}}</text>
					</view>
				</view>
				<view v-if="type == 1">
					<view class="item">
						<text class="left bold">审核状态：</text>
						<text class="right">
							<text v-if="details.auditStatus == 1 || details.auditStatus == 2">审核中</text>
							<text v-if="details.auditStatus == 3">通过</text>
							<text v-if="details.auditStatus == 4">拒绝</text>
						</text>
					</view>
					<view class="item">
						<text class="left bold">收支类型：</text>
						<text class="right">公对公充值</text>
					</view>
					<view class="item">
						<text class="left bold">充值金额：</text>
						<text class="right">{{details.payPrice || "--"}}元</text>
					</view>
					<view class="item">
						<text class="left bold">绑定信息：</text>
						<view>
							<view class="type3">
								<view class="item">
									<text class="left">汇款日期：</text>
									<text class="right">{{details.remittanceTime || "--"}}</text>
								</view>
								<view class="item">
									<text class="left">开户名称：</text>
									<text class="right">{{details.accountName || "--"}}</text>
								</view>
								<view class="item">
									<text class="left">银行卡号：</text>
									<text class="right">{{details.bankCardNo || "--"}}</text>
								</view>
								<view class="item">
									<text class="left">银行名称：</text>
									<text class="right">{{details.bankName || "--"}}</text>
								</view>
								<view class="item">
									<text class="left">开 户 行：</text>
									<text class="right">{{details.bankBranch || "--"}}</text>
								</view>
								<view class="item">
									<text class="left">转账用途：</text>
									<text class="right">{{details.transferPurpose || "--"}}</text>
								</view>
							</view>
						</view>
					</view>
					<view class="item">
						<text class="left bold">备注：</text>
						<text class="right">{{details.remark}}</text>
					</view>
					<view class="item">
						<text class="left bold">打款凭证：</text>
						<view class="image">
							<image :src="details.proofPayment" @click="previewImage(details.proofPayment)"
								style="width: 120rpx;height: 120rpx;" mode=""></image>
						</view>
					</view>
					<view class="item">
						<text class="left bold">操作人：</text>
						<text class="right">{{details.name}}</text>
					</view>
					<view class="item">
						<text class="left bold">操作时间：</text>
						<text class="right">{{details.createTime}}</text>
					</view>
					<view class="item">
						<text class="left bold">平台审核信息：</text>
						<view>
							<view class="item">
								<text class="left">审核意见：</text>
								<text class="right">{{details.reviewOpinion || details.trialOpinion || '--'}}</text>
							</view>
							<view class="item">
								<text class="left">审核时间：</text>
								<text class="right">{{details.examinationCompleteTime ||"--"}}</text>
							</view>
						</view>
					</view>
				</view>
				<view v-if="type == 2">
					<view class="item">
						<text class="left bold">审核状态：</text>
						<text class="right">
							<text v-if="details.result == 1 || details.result == 2">审核中</text>
							<text v-if="details.result == 3">
								通过
								<text v-if="details.type == '02'">
									(
									<text v-if="details.refundStatus == 1"> 待退款 </text>
									<text v-if="details.refundStatus == 2"> 退款中 </text>
									<text v-if="details.refundStatus == 3"> 退款成功 </text>
									<text v-if="details.refundStatus == 4"> 退款失败 </text>
									<text v-if="details.refundStatus == 5"> 已回冲 </text>
									)
								</text>
							</text>
							<text v-if="details.result == 4">拒绝</text>
						</text>
					</view>
					<view class="item">
						<text class="left bold">收支类型：</text>
						<text class="right">{{details.openId ? "微信提现" : '公对公提现'}}</text>
					</view>
					<view class="item">
						<text class="left bold">提现金额：</text>
						<text class="right">{{details.price}} 元</text>
					</view>
					<view>
						<view v-if="details.openId">
							<view class="type1" v-if="details.wxHeadImgUrl && details.wxNickName">
								<view>
									<image :src="details.wxHeadImgUrl" style="width: 100rpx;height: 100rpx;border-radius: 50%;" mode="">
									</image>
								</view>
								<view style="margin-left: 20rpx;">
									{{details.wxNickName}}
								</view>
							</view>
							<view v-else>暂无</view>
						</view>
						<!-- 微信提现 -->
						<view class="type2" v-else>
							<view class="item">
								<text class="left">开户名称：</text>
								<text class="right">{{details.accountName || "--"}}</text>
							</view>
							<view class="item">
								<text class="left">银行卡号：</text>
								<text class="right">{{details.bankCardNo || "--"}}</text>
							</view>
							<view class="item">
								<text class="left">银行名称：</text>
								<text class="right">{{details.bankName || "--"}}</text>
							</view>
							<view class="item">
								<text class="left">开 户 行：</text>
								<text class="right">{{details.bankBranch || "--"}}</text>
							</view>
							<view class="item">
								<text class="left">联系人姓名：</text>
								<text class="right">{{details.contactName || "--"}}</text>
							</view>
							<view class="item">
								<text class="left">联系人手机号：</text>
								<text class="right">{{details.contactPhone || "--"}}</text>
							</view>
						</view>
					</view>
					<view class="item">
						<text class="left bold">备&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注：</text>
						<text class="right">{{details.remark || "-"}}</text>
					</view>
					<view class="item">
						<text class="left bold">操&nbsp;作&nbsp;人：</text>
						<text class="right">{{details.jietuName || "-"}}</text>
					</view>
					<view class="item">
						<text class="left bold">操作时间：</text>
						<text class="right">{{details.createTime || "-"}}</text>
					</view>
					<view class="item">
						<text class="left bold">平台审核信息：</text>
						<view>
							<view class="item">
								<text class="left">审核意见：</text>
								<text class="right">{{details.preExaminationRemark || details.trialOpinion}}</text>
							</view>
							<view class="item">
								<text class="left">审核时间：</text>
								<text class="right">{{details.examinationCompleteTime || "-"}}</text>
							</view>
						</view>
					</view>
					<view class="item">
						<text class="left bold">平台付款信息：</text>
						<view>
							<view class="item">
								<text class="left">付款时间：</text>
								<text class="right">{{details.paymentDate || "-"}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: "",
				details: {},
				type: null,
				operationType: this.$store.state.operationType,
			}
		},
		onLoad(options) {
			this.type = options.type;
			if (options.type == 0) {
				this.title = "收支详情";
				this.getDepositLogDetail(options.id);
			}
			if (options.type == 1) {
				this.title = "充值详情";
				this.getRechargeDetail(options.id);
			}
			if (options.type == 2) {
				this.title = "提现详情";
				this.getWithdrawalDetail(options.id);
			}
		},
		methods: {
			//收支记录详情
			getDepositLogDetail(id) {
				this.api.depositLogDetail(id).then(res => {
					console.log(res);
					let data = res.data.data;
					this.details = {
						...data,
						...(data.withdrawal ? data.withdrawal : "")
					}
					// this.details = res.data.data;
				})
			},
			getRechargeDetail(id) {
				this.api.rechargeDetail(id).then(res => {
					console.log(res);
					this.details = res.data.data;
				})
			},
			getWithdrawalDetail(id) {
				this.api.withdrawalDetail(id).then(res => {
					console.log(res);
					this.details = res.data.data;
				})
			},
			previewImage(url) {
				uni.previewImage({
					urls: [url],
					loop: true,
					fail(err) {
						console.log(err);
					},
				})
			}
		},
	}
</script>

<style scoped lang="scss">
	page {
		background-color: #F6F6F6;
	}

	.details {
		margin: 20rpx;
		border-radius: 10rpx;
		padding: 20rpx;
		background-color: #fff;

		.item {
			margin: 20rpx 0rpx;
		}

		.left {
			font-size: 25rpx;
			// font-weight: 500;
		}

		.right {
			font-size: 25rpx;
			color: #7D7D7D;
		}

		.image {
			margin: 20rpx 0rpx;
		}

		.type1 {
			display: flex;
			align-items: center;
			margin: 20rpx 0rpx;
			// border: 1px solid red;
			// padding-left: 20rpx;
		}

		.type2 {
			margin: 20rpx 0rpx;
			// border: 1px solid pink;
			// padding-left: 20rpx;
		}

		.type3 {
			margin: 20rpx 0rpx;
			// padding-left: 20rpx;
		}
	}

	.bold {
		font-weight: bold;
	}
</style>